<template>
  <div class="cart">
    <MyDesc />
    <!-- 购物车数据 -->
    <van-checkbox-group v-model="result" ref="checkboxGroup">
      <div class="product" v-for="(item,i) in mylist" :key="item.goods_id">
        <van-checkbox v-model="item.checked" :name="item.id" @click="checkboxClick(item)">
          <van-swipe-cell>
          <van-card
            :num="item.number"
            :price="item.retail_price.toFixed(2)"
            :title="item.goods_name"
            :thumb="item.list_pic_url"
          >
            <!-- 步进器 -->
            <template #footer>
              <van-stepper
                v-model="item.number"
                v-if="showbtn"
                @change="numChange(i)"
                min="1"
                max="100"
              />
            </template>
          </van-card>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="del(item.product_id)" />
          </template>
          </van-swipe-cell>
        </van-checkbox>
      </div>
    </van-checkbox-group>

    <!-- 底部 -->
    <van-submit-bar :price="cartTotal.checkedGoodsAmount*100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checked" @click="checkAll">全选</van-checkbox>
      <template #tip>
        共有{{cartTotal.checkedGoodsCount}}个商品，可点击
        <van-button
          :type="showbtn?'danger':'primary'"
          @click="showbtn = !showbtn"
        >{{showbtn?'完成编辑':'编辑'}}</van-button>按钮进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>
 
<script>
import { CartAPI, CartUpdata, CartChecked,delCartProduct } from "../request/api";
import MyDesc from "../components/MyDesc";

export default {
  data() {
    return {
      checked: false,
      mylist: [],
      cartTotal: [],
      showbtn: false,
      result: [],
    };
  },
  methods: {
    // 下单
    onSubmit() {
      this.$toast("该功能尚未开发");
    },
    // 删除
    del(id){
      delCartProduct({
        productIds:id.toString()
      }).then(res => {
        if(res.errno == 0){
          this.TotalFn(res.data)
        }else{
          this.$toast("删除失败")
        }
      })
    },
    // 全选
    checkAll(val) {
      let arr = [];
      this.mylist.map((val) => {
        arr.push(val.product_id);
      });
      let isChecked = this.checked ? 1 : 0;
      let productIds = arr.join(",");
      this.CartCheckedAPI(isChecked, productIds);
    },
    // 复选框点击事件
    checkboxClick(item) {
      if (this.showbtn) {
        return;
      } else {
        let arr = [];
        arr.push(item.product_id);
        let isChecked = item.checked == 1 ? 0 : 1;
        let productIds = arr.join(",");
        this.CartCheckedAPI(isChecked, productIds);
      }
    },
    // 步进器
    numChange(i) {
      event.stopPropagation();
      this.CartUpdataAPI(
        this.mylist[i].goods_id,
        this.mylist[i].id,
        this.mylist[i].number,
        this.mylist[i].product_id
      );
    },
    // 步进器接口
    CartUpdataAPI(goodsId, id, number, productId) {
      CartUpdata({
        goodsId,
        id,
        number,
        productId,
      }).then((res) => {
        this.TotalFn(res.data);
      });
    },
    // 获取数据接口
    getdata() {
      CartAPI().then((res) => {
        this.TotalFn(res.data);
      });
    },
    TotalFn(obj) {
      this.mylist = obj.cartList;
      this.cartTotal = obj.cartTotal;
      this.result = [];
      this.checked =
        this.cartTotal.goodsCount == this.cartTotal.checkedGoodsCount;
      this.mylist.forEach((item) => {
        this.result.push(item.checked == 1 ? item.id : "");
      });
    },
    // 多选框接口
    CartCheckedAPI(isChecked, productIds) {
      CartChecked({
        isChecked,
        productIds,
      }).then((res) => {
        this.TotalFn(res.data);
      });
    },
  },
  created() {
    this.getdata();
  },
  components: {
    MyDesc,
  },
  updated() {
    // console.log("=========================");
    // console.log(this.result);
  },
};
</script>
 
<style lang = "less" scoped>
.cart {
  padding-bottom: 150px;
  background: #fff;
  min-height: 100%;
  .product {
    .van-checkbox {
      display: flex;
      padding: 10px 4%;
      border-bottom: 1px solid #ccc;
      /deep/.van-checkbox__label {
        flex: 1;
      }
      .van-card {
        flex: 1;
        padding: 0;
        margin: 0;
        padding-right: 5px;
      }
    }
  }
}
.van-submit-bar {
  bottom: 50px;
}
/deep/.van-button {
  height: 30px;
}
.van-swipe-cell__right{
  .van-button{
    height: 100%;
  }
}
</style>